<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
</head>
<body>
    <div id="app">
        姓: <input type="text" v-model="firstName"><br>
        名: <input type="text" v-model="lastName">
        <p>姓名:{{ fullName }}</p>

        姓名:<input type="text" v-model="fullName">
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            data:{
                firstName:"",
                lastName:"",
            },

            // 计算属性
            computed:{
             //定义一个fullName函数 调用可以执行里面的代码 (调用不用写小括号)
            //  只能读取 ，不能改变
                /* fullName(){
                    return this.firstName + " " + this.lastName;
                } */

                // 设置可写的计算属性(定义一个方法)
                fullName:{
                    get(){
                        console.log("get()");
                        return this.firstName + " " + this.lastName;
                    },
                    //set可以接受一个参数（val代表接受到的值）
                    set(val){
                        console.log("set()",val);
                                    //结构赋值      切割成数组
                        const [firstName,lastName] = val.split(" ");
                        this.firstName = firstName;
                        this.lastName = lastName;

                    }
                }
            }

        });
        vm.$mount("#app");
    </script>
</body>
</html>